
<!--
  @Descripttion:用户中心-比赛管理
  @Author：yejianbo
  @Date：2022年05月26日 12:35:40
-->
<template>
    <div class="audit-id-page">
        <pageCom>
            <div class="content-page">
                <div class="content">
                <el-breadcrumb
                    separator-class="el-icon-arrow-right"
                    style="margin-bottom: 20px"
                >
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ name: 'userCenter' }"
                    >用户中心</el-breadcrumb-item
                    >
                    <el-breadcrumb-item>
                    <span style="color: #3d6cb0">比赛管理</span>
                    </el-breadcrumb-item>
                </el-breadcrumb>
                <p class="page-title">比赛管理</p>
                <div class="page-content">
                    <div class="search">
                        <img
                            src="@/assets/images/search-icon.png"
                            alt=""
                            class="search-icon"
                        />
                        <el-input
                            placeholder="项目名称"
                            v-model="qureyParams.title"
                            style="width: 150px; margin-right: 10px"
                            clearable
                        >
                        </el-input>
                        <el-select
                            v-model="qureyParams.scheduleType"
                            style="width: 150px; margin-right: 10px"
                            placeholder="阶段"
                            class="search-select"
                            size="mini"
                            clearable
                        >
                            <el-option
                            v-for="item in scheduleTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            >
                            </el-option>
                        </el-select>
                        <el-select
                            v-model="qureyParams.checkStatus"
                            style="width: 150px; margin-right: 10px"
                            placeholder="是否入选"
                            class="search-select"
                            size="mini"
                            clearable
                        >
                            <el-option
                            label="已入选"
                            :value="1"
                            >
                            </el-option>
                            <el-option
                            label="未入选"
                            :value="0"
                            >
                            </el-option>
                        </el-select>
                        <el-button size="mini" type="primary" @click="getData">搜索</el-button>
                        <el-button
                            size="mini"
                            style="font-size: 15px; color: #3d6cb0"
                            type="text"
                            @click="clearCondition"
                            >清空筛选条件</el-button
                        >
                    </div>
                    <el-table
                    :data="tableData"
                    >
                        <el-table-column
                        prop="title"
                        label="项目名称"
                        width="200">
                        <template slot-scope="scope">
                        <p class="product-title-link" @click="linkToProductDetail(scope.row.projectId)">{{ scope.row.title }}</p>
                        </template>
                        </el-table-column>
                        <el-table-column
                            prop="entryType"
                            label="阶段"
                            align="left">
                        <template slot-scope="scope">
                            <!-- 报名类型;1:团队;2:个人 -->
                            <p>{{ scheduleTypeStr[scope.row.scheduleType] || '--' }}</p>
                        </template>
                        </el-table-column>
                        <el-table-column align="left" label="状态">
                            <template slot-scope="scope">
                            <!-- 报名类型;1:团队;2:个人 -->
                            <p>{{ scope.row.annexUrl && scope.row.annexName ? '已上传': '未上传' }}</p>
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="entryStatusStr"
                        align="left"
                        label="是否入选"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="isGerAwardStr"
                        align="left"
                        label="是否获奖"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="rateScore"
                        align="center"
                        label="评分">
                        <template slot-scope="scope">
                            <!-- 报名(参赛)状态;1:未报名;2:报名中 -->
                            <p>{{ scope.row.rateScore || '--'}}</p>
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="startTime"
                        align="left"
                        label="开始时间"
                        width="110">
                        <template slot-scope="scope">
                            {{ scope.row.startTime || '--' }}
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="endTime"
                        align="left"
                        label="结束时间"
                        width="110">
                        <template slot-scope="scope">
                            {{ scope.row.endTime || '--' }}
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="closingDate"
                        align="left"
                        label="截止上传时间"
                        width="110">
                        <template slot-scope="scope">
                            {{ scope.row.closingDate || '--' }}
                        </template>
                        </el-table-column>
                        <el-table-column
                        align="center"
                        fixed="right"
                        prop="zip"
                        label="操作"
                        width="200"
                        >
                        <template slot-scope="scope">
                            <div style="display: flex;flex-flow: row nowrap;justify-content: center;">
                                <FileUpload v-if="Number(scope.row.jobType) === 1" style="margin: 0 10px"  :fileType="['zip']"  @success="handleAvatarSuccess">
                                    <el-button style="margin: 0 10px" type="text" @click="uploadFile(scope.row)">上传</el-button>
                                </FileUpload>
                                <el-button v-if="scope.row.entryStatusStr === '未入选' || scope.row.entryStatusStr === '已入选'" type="text" style="margin: 0 10px" @click="getMatchResult(scope.row)">查看</el-button>
                                <el-button v-if="scope.row.resultId !== null && scope.row.resultId > 0" type="text" style="margin: 0 10px" @click="linkToCheckResultDetail(scope.row.resultId)">查看公示</el-button>
                            </div>
                        </template>
                        </el-table-column>
                    </el-table>
                    <div style="display: flex;flex-flow: row nowrap; justify-content: center;padding: 46px 0;">
                        <el-pagination
                            class="bottom-page"
                            background
                            layout="prev, pager, next"
                            :total="total"
                            :page-size="pageSize"
                            :page-sizes="[6, 12, 24, 36, 48]"
                            @size-change="pagesizeHandle"
                            @current-change="currentChange"
                            :current-page="pageNo"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="50%"
                >
                <!-- 
                    学生点击查看，3种情况，与邮件提示模版的保持逻辑一致：
                    1.学生未入选，提示
                    2.学生在入选到下一个阶段，提示祝贺模版
                    3.学生在决赛获奖，提示奖励
                 -->
                <div v-if="currentItem.scheduleType !== 4 && currentItem.entryStatusStr === '已入选'">
                    <div class="result-title">{{ currentItem.title || '--' }}</div>
                    <div class="result-text">
                            您好，我们很高兴的通知您已入选{{currentItem.title || '--'}}-{{scheduleTypeStr[currentItem.scheduleType]}}。具体安排如下，请于截止日期{{currentItem.closingDate || '--'}}前上传作品!
                    </div>
                    <el-row>
                        <el-col :span="3">比赛阶段</el-col>
                        <el-col :span="21">
                            <div class="result-text">
                                {{scheduleTypeStr[currentItem.scheduleType]}}
                            </div>
                        </el-col>
                        <el-col :span="3">比赛时间</el-col>
                        <el-col :span="21">
                            <div class="result-text">
                                {{currentItem.startTime || '--'}}至{{currentItem.endTime || '--'}}
                            </div>
                        </el-col>
                        <el-col :span="3" v-if="resultDialog.otherNotes">其他</el-col>
                        <el-col :span="21">
                            <div class="result-text" v-if="resultDialog.otherNotes" v-html="resultDialog.otherNotes || '--'"></div>
                        </el-col>
                        <el-col :span="3" v-if="resultDialog.linkName">联系人</el-col>
                        <el-col :span="21">
                            <div class="result-text" v-if="resultDialog.linkName" >
                                {{resultDialog.linkName || '--'}}
                            </div>
                        </el-col>
                        <el-col :span="3" v-if="resultDialog.linkMobile">联系方式</el-col>
                        <el-col :span="21">
                            <div class="result-text" v-if="resultDialog.linkMobile">
                                {{resultDialog.linkMobile || '--'}}
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div v-else-if="currentItem.entryStatusStr === '未入选'">
                    <div class="result-title">{{ currentItem.title || '--' }}</div>
                    <div class="result-text">
                        您好，很遗憾通知您参加的{{ currentItem.title || '--' }}{{scheduleTypeStr[currentItem.scheduleType]}}未入选，感谢您的参加。请再接再厉，长风破浪会有时，直挂云帆济沧海。
                    </div>
                    <!-- <div class="result-public-time">
                        发布单位：{{ resultDialog.prizeName || '--' }}
                    </div> -->
                </div>
                <!-- 决赛奖励 -->
                <div v-else="currentItem.scheduleType === 4 && currentItem.checkStatus === 1">
                    <div class="result-title">{{ currentItem.title || '--' }}</div>
                    <div class="result-text">
                            您好，我们很高兴的通知您已获得{{currentItem.title || '--'}}奖励。具体颁奖安排如下：
                    </div>
                    <el-row>
                        <el-col :span="3">奖项</el-col>
                        <el-col :span="21">
                            <div class="result-text">
                                {{resultDialog.prizeName || '--'}}
                            </div>
                        </el-col>
                        <el-col :span="3"> 颁奖时间</el-col>
                        <el-col :span="21">
                            <div class="result-text">
                                {{resultDialog.prizeCeremony || '--'}}
                            </div>
                        </el-col>
                        <el-col :span="3">颁奖类型</el-col>
                        <el-col :span="21">
                            <div class="result-text">
                                <!-- prizeType//1:线上颁奖;2:线下颁奖 -->
                                {{ Number(resultDialog.prizeType) === 1 ? '线上颁奖' :Number(resultDialog.prizeType) === 2 ? '线下颁奖' : '--'}}
                            </div>
                        </el-col>
                        <el-col :span="3" v-if="resultDialog.otherNotes">其他</el-col>
                        <el-col :span="21">
                            <div class="result-text" v-if="resultDialog.otherNotes" v-html="resultDialog.otherNotes || '--'"></div>
                        </el-col>
                        <el-col :span="3" v-if="resultDialog.linkName">联系人</el-col>
                        <el-col :span="21">
                            <div class="result-text" v-if="resultDialog.linkName" >
                                {{resultDialog.linkName || '--'}}
                            </div>
                        </el-col>
                        <el-col :span="3" v-if="resultDialog.linkMobile">联系方式</el-col>
                        <el-col :span="21">
                            <div class="result-text" v-if="resultDialog.linkMobile">
                                {{resultDialog.linkMobile || '--'}}
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
                </el-dialog>
        </pageCom>
    </div>
  </template>
  
  <script>
  import pageCom from "@/components/page";
  import { getSchedulePage, uploadAnnex, getMatchResultInfo } from "../../request/api";
  import moment from 'moment'
  import FileUpload from '@/components/FileUpload'

  export default {
    // 组件名称
    name: "registrationProduct",
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: { pageCom, FileUpload},
    computed: {
    },
    created() {
        this.getData()
    },
    watch: {
    },
    // 组件状态值
    data() {
      return {
        dialogVisible:false,
        resultDialog: {
            projectId: '',
            "title": '',
            "closingDate": '',
            "startTime": '',
            "endTime": '',
            "otherNotes": '',
            "linkName": '',
            "linkMobile": '',
            "prizeName": '',
            "prizeCeremony": '',
            "prizeType": '',
        },
        productStatus: [
            {
            label: "报名中",
            value: 1,
            },
            {
            label: "已结束",
            value: 2,
            },
        ],
        scheduleTypeList: [
            {label: '初赛',value: '2'},
            {label: '复赛',value: '3'},
            {label: '决赛',value: '4'},
        ],
        scheduleTypeStr: {
            1: '遴选',
            2: '初赛',
            3: '复赛',
            4: '决赛'
        },
        action:
        process.env.VUE_APP_BASE_API + "/app-api/student/web-student/upload",
        tableData: [],
        total: 0,
        pageNo: 1,
        pageSize: 10,
        currentItem: '',
        qureyParams: {
            title: "",
            scheduleType: "", // 阶段
            checkStatus: "", // 是否入选 checkStatus = 1 表示入选 ''||0 表示未入选
        },
      };
    },
    // 组件方法
    methods: {
        clearCondition() {
            this.qureyParams = this.$options.data().qureyParams;
            this.getData();
        },
        linkToProductDetail(id) {
            this.$router.push({name: 'productDetail', query: {id: id}})
        },
        linkToProductDetail1(id) {
            this.$router.push({name: 'checkProductDetail', query: {id: id}})
        },
        linkToCheckResultDetail(id) {
            this.$router.push({name: 'productResultDetail', query: {id: id}})
        },
        getMatchResult(item) {
            this.currentItem = item
            getMatchResultInfo({id: item.id, scheduleType: item.scheduleType}).then(res => {
                if (res && res.code === 0) {
                    this.resultDialog = this.$options.data().resultDialog
                    Object.assign(this.resultDialog, res.data)
                    this.dialogVisible = true
                } else {
                    this.$message.warning('数据异常，请稍后重试')
                }
            })
        },
        uploadFile(item) {
            this.currentItem = item
        },
        onError() {
            this.$message.warning("上传失败，请稍后重试");
        },
        handleAvatarSuccess({url, file}) {
            uploadAnnex({
                annexName: file.name,
                annexUrl: url,
                id: this.currentItem.id
            }).then(res => {
                if (res && res.code === 0) {
                    this.$message.success("上传成功");
                    this.getData()
                } else {
                    this.$message.error(res.msg || '上传失败，请稍后重试');
                }
            })
        },
        pagesizeHandle(val) {
          this.pageSize = Number(val);
          this.getData();
        },
        currentChange(e) {
            this.pageNo = e;
            this.getData();
        },
        getData() {
            let params = Object.assign({}, this.qureyParams, {
                pageNo: this.pageNo,
                pageSize: this.pageSize,
            })
            getSchedulePage(params).then(res => {
                if(res && res.code === 0) {
                    const {list, total} = res.data
                    this.tableData = list.map(item => {
                        let newDate = moment()
                        let endTime = moment(item.endTime, 'YYYY-MM-DD HH:mm:ss')
                        item.entryStatusStr = '' // 是否入选
                        item.isGerAwardStr = '' // 是否获奖
                        if (Number(item.checkStatus) === 1) {
                            item.entryStatusStr = '已入选'
                        } else if ( Number(item.checkStatus) !== 1 && newDate.isAfter(endTime) ) {
                            item.entryStatusStr = '未入选'
                        } else {
                            item.entryStatusStr = '--'
                        }
                        if (item.scheduleType === 4 && Number(item.checkStatus) === 1) {
                            item.isGerAwardStr = '已获奖'
                        } else if (item.scheduleType !== 4) {
                            item.isGerAwardStr = '--'
                        } else if (Number(item.checkStatus) !== 1 && newDate.isAfter(endTime) ) {
                            item.isGerAwardStr = '未获奖'
                        } else {
                            item.isGerAwardStr = '--'
                        }
                        return item
                    })
                    this.total = total
                }
            })
        },
    },
  };
  </script>
  <style lang="less" scoped>
.content-page {
    position: relative;
    width: 100%;
    height: 100%;
    .names{
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #37383D;
    line-height: 21px;
    margin-bottom: 20px;
    display: flex;
    span{
        color: #9597A0;
        width: 78px;
        margin-right: 20px;
    }
    }

    .page-title {
    font-size: 25px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #37383D;
    line-height: 36px;
    margin: 30px 0;
    }
    .search {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 30px;
    position: relative;
    .search-icon {
        width: 18px;
        height: 20px;
        position: absolute;
        left: 0;
        top: 10px;
    }

    .search-select {
        width: 160px;
        margin-right: 13px;
    }
    }
    .bannber {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 25px;
    object-fit: cover;
    height: 170px;
    }

    .content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    padding: 23px 30px;
    margin: 0 auto;

    .content-title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383D;
        line-height: 25px;
        margin-bottom: 16px;
        &::before {
            content: '*';
            color: #F56C6C;
            margin-right: 4px;
        }
    }
    /deep/.el-form-item__label{
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
    }
    }
}
  .product-title-link {
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4677B9;
    line-height: 21px;
    cursor: pointer;
  }
  /deep/ .el-button--text {
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4677B9;
    line-height: 21px;
  }
  /deep/ .el-breadcrumb__inner {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #37383d;
    line-height: 28px;
    cursor: pointer;
  }
  .hover-icon {
    cursor: pointer;
  }
  .showAuthentication{
      position: fixed;
      z-index: 2014;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.3);
    .showAuthenticationBox{
      width: 360px;
      height: 241px;
      padding: 66px 30px 90px;
      border-radius: 12px;
      background: #fff;
      position: relative;
      .content{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383D;
        line-height: 21px;
      }
      .content2{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383D;
        line-height: 21px;
      }
      .title{
        position: absolute;
        width: 100%;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383D;
        line-height: 25px;
        top:25px;
      }
      .title2{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383D;
        line-height: 20px;
        margin-bottom: 12px;
      }
      .btns{
        width: 100%;
        height: 40px;
        position: absolute;
        bottom: 40px;
        left: 0;
        display: flex;
        justify-content: space-between;
        padding: 0 40px;
        &>div{
          width: 130px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #4677B9;
          border: 1px solid #4677B9;
          border-radius: 2px;
          cursor: pointer;
          &.submit{
            background: #4677B9;
            color: #fff;
            border: none;
          }
        }
      }
    }
  }
  .result-title {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #37383D;
    line-height: 28px;
    text-align: center;
    margin: 0 0 30px 0;
}
.result-text {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #37383D;
    line-height: 20px;
    text-indent: 32px;
    margin-bottom: 19px;
}
.result-public-time {
    text-align: right;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597A0;
    line-height: 28px;
}
  /deep/ .el-input__suffix{
    display: none;
  }
  /deep/ .el-table th.el-table__cell {
    background: #F5F8FA;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #37383D;
  }
  #app .el-pagination.is-background .el-pager li:not(.disabled).active {
  width: 32px !important;
  height: 32px !important;
}

/deep/ .el-button--primary {
  width: 64px;
  height: 40px;
  padding: 0;
  background: #4677b9;
  border-radius: 5px;
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  border: none;
  font-weight: 500;
}
/deep/ .el-button--danger {
  background: #4677b9;
  border: none;
}
  </style>
  